<template>
    <textarea
      class="ant-input" rows="3" v-bind="$attrs"
      :value="value"
      @input="onInput"
      @compositionstart="onStart"
      @compositionend="onEnd"
      ref="areaRef"
    >
    </textarea>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    props: {
      value: {
        type: String,
        required: true
      }
    },
    name: 'TextAreaFix',
    emits: ['change'],
    setup (props, context) {
      const areaRef = ref<HTMLTextAreaElement | null>(null)
      let triggerFlag = false
      const onInput = (e: Event) => {
        console.log(e)
        if (triggerFlag) return
        context.emit('change', e)
      }
      const onStart = () => {
        triggerFlag = true
      }
      const onEnd = () => {
        triggerFlag = false
        if (areaRef.value) {
          areaRef.value.dispatchEvent(new Event('input'))
        }
      }
      return {
        areaRef,
        onInput,
        onStart,
        onEnd
      }
    }
  })
  </script>
  
  <style>
  
  </style>
  